<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax封装-回调函数</title>
</head>

<body>

    <div class="box"></div>
    <script>
        /*
            1.封装ajax
            params:
                method:请求方式 （get|post|delete|put）
                url:请求地址
                data:请求参数 key=value&key2=value2
                        get:=>?key=value&key2=value2
                        post:=>key=value&key2=value2
                callBack:接受请求数据的回调函数
            return:
        */


        // 封装ajax 参数  method  url  data  callback
        function request(method, url, data = null, callBack) {
            // 1.创建ajax对象
            let xhr = new XMLHttpRequest()
            // 2.open()打开 如果是get要考虑是否地址栏传参，post没有
            url = method == 'get' && data != null ? url + '?' + data : url
            xhr.open(method, url, true)
            // 3.post有,get没有
            if (method == "post") xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
            // 4.send()发送请求 post有参数，get无参数
            xhr.send(method == "get" ? "" : data)
            // 5.监听
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    // 请求结果回来后传递给回调函数
                    callBack(JSON.parse(xhr.response))
                    render(JSON.parse(xhr.response))
                }
            }
        }


        // 测试封装的方法：get  post
        request("get", "https://hmajax.itheima.net/api/news","", function (res) {
            console.log(res);

        })

        // post
        request("post", "https://hmajax.itheima.net/api/register","username=user0005&password=111111", function (res) {
            console.log("注册的结果是："+res.message);

        })


        // 　　5. 更新界面

        function render(data) {
            document.querySelector(".box").innerHTML = data.message
        }


    </script>
</body>

</html>